<!-- 故事管理 -->
<template>
	<div class="padding-container">
		<!-- 搜索栏 -->
		<el-card class="search">
			<!-- 使用el布局 -->
			<el-row>
				<!-- 左侧搜索信息占80% -->
				<el-col :span="20">
					<el-col :span="8">
						<div class="search_grop">
							<el-input placeholder="输入剧情内容查询" prefix-icon="el-icon-search"
								v-model="searchModel.dramaContent" size="medium">
							</el-input>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="search_grop">
							<el-select v-model="searchModel.dramaStatus" clearable placeholder="请选择" size="medium">
								<el-option v-for="dict in status" :key="dict.dictValue" :label="dict.dictLabel"
									:value="dict.dictValue" />
							</el-select>
						</div>
					</el-col>
				</el-col>
				<!-- 左侧搜索栏按钮占20% -->
				<el-col :span="4">
					<el-col :span="12">
						<div>
							<el-button type="primary" v-waves plain size="medium" @click="search">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="12">
						<div>
							<el-button type="success" plain size="medium" @click="openEdit(null)">添加</el-button>
						</div>
					</el-col>
				</el-col>
			</el-row>
		</el-card>
		<!-- 显示栏 -->
		<el-card class="tables">
			<el-table height="350" :data="tableData" row-key="dramaId" style="width: 100%" v-loading="tableLoading">
				<el-table-column prop="dramaSequence" label="排序(点击或拖拽)" width="140" align="center"
					:show-overflow-tooltip='true'>
					<template slot-scope="scope">
						<div class="sort-pot">
							<span>{{ scope.row.dramaSequence }}</span>
							<div>
								<i class="el-icon-caret-top" @click="upOrder(scope.$index)"></i>
								<i class="el-icon-caret-bottom" @click="downOrder(scope.$index)"></i>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="dramaContent" label="剧情内容" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="dramaAnswer" label="剧情答案" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="attractionsId" label="景点ID" width="70" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="createBy" label="创建者" width="100" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="updateBy" label="更新者" width="100" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="updateTime" label="更新时间" width="300" align="center"
					:show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column prop="remark" label="备注" width="300" align="center" :show-overflow-tooltip='true'>
				</el-table-column>
				<el-table-column align="right" width="150">
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini" @click="openEdit(scope.row.dramaId)">修改</el-button>
						<el-button :type="dict.dictValue==0?'success':'warning'" plain v-for="dict in status"
							v-if="scope.row.dramaStatus === dict.dictValue" size="mini"
							@click="toggleStatus(scope.row.dramaId,dict.dictValue)">{{dict.dictLabel}}</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<div class="page">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="searchModel.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="searchModel.pageSize"
				:pager-count="11" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center"
				background>
			</el-pagination>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-el-drag :title="dialogTitle" :visible.sync="dialogVisible" width="75%" @close="handleClose">
			<!-- 弹出框详细内容 -->
			<el-form ref="ruleForm" :rules="Validate" :model="ruleForm">
				<el-form-item label="剧情内容" prop="dramaContent">
					<el-input type="textarea" v-model="ruleForm.dramaContent"></el-input>
				</el-form-item>
				<el-form-item label="剧情答案" prop="dramaAnswer">
					<el-input type="textarea" v-model="ruleForm.dramaAnswer"></el-input>
				</el-form-item>
				<!-- 景点id -->
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" v-model="ruleForm.remark"></el-input>
				</el-form-item>
			</el-form>
			<!-- 弹出框尾部插槽 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit('ruleForm')" :loading="btnLoading">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import waves from "@/directives/waves/index.js"
	import ElDrag from "@/directives/ElDrag/index.js"
	import MdInput from "@/components/MDInput"
	import Sortable from "sortablejs"
	import {
		list,
		update,
		selectDramaById,
		insert,
		updateSort
	} from "@/api/drama"
	import dictManage from "@/api/common/dictManage"
	export default {
		directives: {
			waves,
			ElDrag
		},
		components: {
			MdInput
		},
		data() {
			return {
				// 表格加载
				tableLoading: false,
				// 按钮加载
				btnLoading: false,
				// 搜索条件 + 页数 + 每页显示条目数 ，前端发起请求可以直接传入 searchModel 对象
				searchModel: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'drama_sequence',
					storyId: this.$route.params.storyId,
					dramaContent: "",
					dramaStatus: ""
				},
				// 弹出窗标题
				dialogTitle: '',
				// 弹出窗显示
				dialogVisible: false,
				// 添加 点击的
				// 总条数
				total: null,
				// 表单数据
				form: {},
				// 表格数据
				tableData: [],
				ruleForm: {
					dramaSequence: '',
					dramaContent: '',
					dramaAnswer: '',
					attractionsId: ''
				},
				loading: false,
				Validate: {
					dramaContent: [{
						required: true,
						message: '请输入剧情内容',
						trigger: 'blur'
					}],
					dramaAnswer: [{
						required: true,
						message: '请输入剧情答案',
						trigger: 'blur'
					}]
				},
				status: [],
				reallyTotal: '',
				visible: false
			}
		},
		mounted() {
			this.rowDrop();
		},
		created() {
			this.tableLoading = true
			list(this.searchModel).then(res => {
				this.tableData = res.rows
				this.total = res.total
				this.reallyTotal = res.total
				this.tableLoading = false
			})
			dictManage.getDictData('sys_normal_disable').then(res => {
				this.status = res.data
			})
		},
		methods: {
			//移动排序（本页）
			rowDrop() {
				const tbody = document.querySelector(".el-table__body-wrapper tbody");
				const _this = this;
				Sortable.create(tbody, {
					onEnd({
						newIndex,
						oldIndex
					}) {
						//先选中的是旧的
						const array = []
						const currRow = _this.tableData.splice(oldIndex, 1)[0];
						_this.tableData.splice(newIndex, 0, currRow);
						this.tableLoading = true
						for (let i = 0; i < _this.tableData.length; i++) {
							if (_this.tableData[i].dramaSequence != (i + 1)) {
								let drama = {
									dramaId: _this.tableData[i].dramaId,
									dramaSequence: i + 1
								}
								array.push(drama)
							}
						}
						for (let i = 0; i < array.length; i++) {
							update(array[i]).then(() => {
								if (i = array.length - 1) {
									_this.getData()
								}
							})
						}
					},
				});
			},
			//点击排序（可跨页）
			upOrder(index) {
				if (this.tableData[index].dramaSequence == 1) {
					this.$message({
						message: '已经是第一条数据了！',
						type: 'warning'
					});
				} else {
					this.tableData[index].sort = 1
					updateSort(this.tableData[index]).then(() => {
						this.getData()
					})
				}
			},
			downOrder(index) {
				if (this.tableData[index].dramaSequence == this.reallyTotal) {
					this.$message({
						message: '已经是最后一条数据了！',
						type: 'warning'
					});
				} else {
					this.tableData[index].sort = 0
					updateSort(this.tableData[index]).then(() => {
						this.getData()
					})
				}
			},
			//列表
			getData() {
				this.tableLoading = true
				list(this.searchModel).then(res => {
					this.tableData = res.rows
					this.total = res.total
					this.tableLoading = false
				})
			},
			// 弹窗关闭触发
			handleClose() {

			},
			handleSizeChange(val) {
				this.searchModel.pageSize = val
				this.getData()
			},
			handleCurrentChange(val) {
				this.searchModel.pageNum = val
				this.getData()
			},
			// 搜索
			search() {
				this.getData()
			},
			// 添加和修改都走这里
			openEdit(id) {
				if (id) {
					this.ruleForm.dramaId = id
					let drama = {
						dramaId: id
					}
					selectDramaById(drama).then(res => {
						console.log(res)
						this.ruleForm = res.data
					})
					this.dialogTitle = '修改剧情' // 修改
				} else {
					this.ruleForm = {}
					this.ruleForm.dramaId = 0
					//登录注册、图片上传
					this.ruleForm.attractionsId = 1 //景点id
					this.ruleForm.storyId = this.$route.params.storyId //故事id
					this.ruleForm.dramaSequence = this.reallyTotal ? (this.reallyTotal + 1) : 1 //排序
					this.dialogTitle = '添加剧情' // 添加
				}
				this.dialogVisible = true;
			},
			// 禁用启用
			toggleStatus(id, status) {
				if (status == 1) {
					status = 0
				} else {
					status = 1
				}
				let tSysDrama = {
					dramaId: id,
					dramaStatus: status
				}
				update(tSysDrama).then(res => {
					this.getData()
				})
			},
			//增，改
			submit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.tableLoading = true
						if (this.ruleForm.dramaId) {
							console.log(this.ruleForm);
							update(this.ruleForm).then(res => {
								this.getData()
							})
						} else {
							console.log(this.ruleForm);
							insert(this.ruleForm).then(res => {
								this.getData()
							})
						}
						this.dialogVisible = false
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.dialog-goods-form .title {
		display: inline-block;
		margin-bottom: 15px;
		font-size: 18px;
	}

	.dialog-goods-form .el-input {
		width: 400px;
	}

	.dialog-goods-form .el-select {
		width: 400px;
	}

	.dialog-goods-list {
		height: 350px;
		overflow-y: auto;
	}

	a {
		color: rgb(68, 134, 181)
	}

	a:hover {
		color: rgb(32, 160, 255)
	}

	.sort-pot {
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
	}
</style>